// 封装所有的自定义指令的所有集合
// import store from '@/store'
import moment from 'moment'
// 导入全局仓库
import store from '@/store/index.js'
export default {
  Imageerror: {
    bind() { }, // 渲染前，类似于beforemounted
    // inserted表示渲染后的结果---类似于mounted
    inserted(dom, obj, vnode) {
      dom.src = dom.src || obj.value
      // dom表示当前指令绑定的对象
      // 错误监听事件：当这个对象发生错误的之后的一些结果
      dom.onerror = () => {
        dom.src = obj.value
      }
    },
    update() { }, // 跟新时，不一定是当前组件跟新会触发，页面其他更新就会触发这个，会产生oldvalue
    componentUpdated(dom, obj, vnode) {
      dom.src = dom.src || obj.value
    }, // 组件完成跟新时
    // 指令销毁时解除错误监听
    unbind(dom, obj, vnode) {
      dom.onerror = ''
    }
  },
  // 实现当点击dom元素外，就执行传递过来的一个执行方法
  outClick: {
    inserted(dom, obj, vnode) {
      // 在自定义指令vnode.context组件上增加一个函数---
      // 目的: 当销毁的时候也要使用这个函数, 所以需要注册一个公共的方法, 销毁的同一个方法
      vnode.context.add = (e) => {
        // contains判断一个元素是否在另一个元素里面
        // 判断点击事件是否在dom元素里
        // e.target表示时间触发对象
        if (!dom.contains(e.target)) {
          // 如果点击事件不在树形结构中，就执行传递过来的函数方法
          obj.value()// 在标签上传过来的是点击事件关闭弹窗,执行关闭弹框的函数
        }
      }
      // 判断当前点击的的是否包含在dom元素内
      document.addEventListener('click', vnode.context.add)
    },
    // 销毁点击事件
    unbind(dom, obj, vnode) {
      document.removeEventListener('click', vnode.context.add)
    }
  },
  // 自定义指令格式化时间
  formDate: {
    bind() { },
    inserted(dom, obj, vnode) {
      dom.innerText = moment(obj.value).format('YYYY-MM-DD')
    }
  },
  // 实现按钮权限设置自定义指令
  // display: inline-block;
  buttonPermissison: {
    // bom对象渲染完成后
    inserted(dom, obj, vnode) {
      // 判断自定义指令的值是否存在再全局仓库中,存在就显示当前dom,不存在就隐藏当前dom值
      buttonPermissisonFn(dom, obj)
    },
    // 跟新完组件后
    componentUpdated(dom, obj, vnode) {
      buttonPermissisonFn(dom, obj)
    }
  }
}
function buttonPermissisonFn(dom, obj) {
  if (store.state.user.userinfo.roles.points.includes(obj.value)) {
    // dom.style.display = 'block'
    // 判断是否存在属性名
    if (obj.arg === 'inlineBolck') {
      dom.style.display = 'inline-block'
    } else {
      dom.style.display = 'block'
    }
  } else {
    dom.style.display = 'none'
  }
}

